<template>
	<view class="gui-padding">
		<view class="gui-list gui-margin-top">
			<form @submit="formSubmit" class="gui-form">
				<view class="gui-margin-top">
					<text class="gui-text-small gui-color-gray">您的姓名</text>
				</view>
				<view class="gui-border-b">
					<input type="text" class="gui-form-input" name="name" placeholder="请填写联系姓名" v-model="name"/>
				</view>
				<view class="gui-margin-top">
					<text class="gui-text-small gui-color-gray">联系电话</text>
				</view>
				<view class="gui-border-b">
					<input type="number" class="gui-form-input" name="phoneno" placeholder="请填写联系电话" v-model="phone">
				</view>
				<view class="gui-margin-top">
					<text class="gui-text-small gui-color-gray gui-icons">所在地区 &#xe603;</text>
				</view>
				<view class="gui-border-b" @tap="openPicker">
					<input type="text" class="gui-form-input" name="area" :value="area" disabled placeholder="请选择所在地区">
				</view>
				<view class="gui-margin-top">
					<text class="gui-text-small gui-color-gray">详细地址</text>
				</view>
				<view style="padding-top:15rpx;">
					<input type="text" class="gui-form-input" name="address" placeholder="请填写详细地址" v-model="addressDetailed">
				</view>
				<view class="gui-margin-top gui-flex gui-justify-content-end gui-align-items-center">
					<text class="gui-text-small gui-color-gray" style="margin-right: 10rpx;">设为默认地址</text>
					<switch  name="type" @change="switchChange" color="#F66867" style="zoom: 0.8;" value="1" :checked="isCheck"/>
				</view>
				<view class="gui-margin-top">
					<button type="default" class="gui-button gui-bg-primary" formType="submit">
						<text class="gui-icons gui-color-white gui-button-text">{{buttonMsg}}</text>
					</button>
				</view>
				<view class="gui-margin-top" v-if="isModify">
					<button type="default" class="gui-button gui-bg-gray" @tap="addressDel">
						<text class="gui-icons gui-color-black gui-button-text">删 除</text>
					</button>
				</view>
				<gui-area-picker ref="graceAddressPicker" 
				@confirm="areaConfirm" :value="area"></gui-area-picker>
			</form>
		</view>
	</view>
</template>
<script>
var  graceChecker = require("@/GraceUI5/js/checker.js");
export default {
	data() {
		return {
			area:['河南省','南阳市','淅川县'],
			//是否设为默认地址
			addressType:0,
			code:'',
			isModify:false,
			buttonMsg:'确认添加',
			phone:'',
			name:'',
			addressDetailed:'',
			isCheck:false
		}
	},
	onLoad:function(option){
		if(option.address){
			let address = JSON.parse(decodeURIComponent(option.address)) 
			// address: "开蓝天花与蝶"
			// area: "淅川县"
			// city: "南阳市"
			// code: "A2021062723409418039"
			// create_at: "2021-06-27 19:04:40"
			// id: 7
			// name: "玩一果戟"
			// phone: "18937777307"
			// province: "河南省"
			// type: 0
			// uid: 7
			this.isModify = true
			this.buttonMsg ='确认修改'
			this.area = [address.province,address.city,address.area]
			this.code = address.code
			this.name = address.name
			this.phone = address.phone
			this.addressDetailed = address.address
			this.addressType = address.type
			if(address.type==0){
				this.isCheck =false
			}else{
				this.isCheck = true
			}
			
		}
	},
	methods: {
		// 表单提交
		formSubmit : function(e){
			var rule = [
				{ name: "name", checkType: "string", checkRule: "1,10", errorMsg: "联系人应为1-20个字符" },
				{ name: "phoneno", checkType: "phoneno", checkRule: "", errorMsg: "请正确填写手机号" },
				{ name: "area", checkType: "string", checkRule: "1,100", errorMsg: "请选择所在地区" },
				{ name: "address", checkType: "string", checkRule: "5,100", errorMsg: "请正确填写详细地址" }
			];
			var formData = e.detail.value;

			var checkRes = graceChecker.check(formData, rule);
			
			if(checkRes){
				let name = formData.name
				let phone = formData.phoneno
				let province = this.area[0]
				let city = this.area[1]
				let area = this.area[2]
				let address = formData.address
				let type = this.addressType
				let code = this.code
				let PostUrl
				this.$http.request({
					url:'auth.address/set',
					method:'POST',
					data:{
						name,phone,province,city,area,address,type,code
					},
					withToken:true
				}).then(res=>{
					if(res.id>0){
						let pages = getCurrentPages();
						let prePage = pages[pages.length-2]
						prePage.onLoad();
						uni.navigateBack();
					}
				}).catch(err=>{
					console.log(err)
				})
			}else{
				uni.showToast({ title: graceChecker.error, icon: "none" });
			}
		},
		openPicker : function () {
			this.$refs.graceAddressPicker.open();
		},
		areaConfirm : function (e) {
			// 返回选中城市的编号及文本信息
			//console.log(e);
			this.area = [e.names[0],e.names[1],e.names[2]];
		},
		// switch 开关
		switchChange : function (e) {
			if(e.detail.value){
				this.addressType =1
			}else{
				this.addressType = 0
			}
		},
		goback : function () {
			// 返回跳转
		},
		addressDel:function(){
			let pages = getCurrentPages();
			let prePage = pages[pages.length-2]
	
			uni.showModal({
				content:"确定要删除吗？",
				success: (res) => {
					if(res.confirm){
						//网络请求删除
						this.$http.request({
							url:'auth.address/remove',
							method:'POST',
							data:{
								code:this.code,
							},
							withToken:true
						}).then(res=>{
							let pages = getCurrentPages();
							let prePage = pages[pages.length-2]
							prePage.onLoad();
							uni.navigateBack();
							
						}).catch(err=>{
							
						})
					}
				}
			})
		}
	}
}
</script>
<style scoped>
.gui-border-b{padding-top:15rpx;}
</style>